<script lang="ts">
import { defineComponent, ref, onMounted, watchEffect } from "vue";
import { useAppStore } from "@/store/modules/app";

export default defineComponent({
  inheritAttrs: false,
  setup(props, { slots }) {
    const appStore = useAppStore();
    const w = ref(document.body.clientWidth);
    // 监听浏览器窗口变化
    watchEffect(() => {
      if (w.value <= 640) {
        appStore.setMobile(true);
        appStore.setCollapsed(false);
      } else {
        appStore.setMobile(false);
        appStore.setSidebar(false);
      }
    });
    onMounted(() => {
      // 监听窗口事件，判断窗口类型是否是移动端
      window.addEventListener("resize", () => {
        w.value = document.body.clientWidth;
      });
    });
    return () => slots.default?.();
  },
});
</script>
